<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>森林小动物互动绘本</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Comic Sans MS', 'Noto Sans SC', sans-serif;
            background-color: #f0f9ff;
            color: #2d3748;
        }
        .book-page {
            transition: all 0.3s ease;
        }
        .book-page:hover {
            transform: translateY(-5px);
        }
        .character-bubble {
            position: relative;
            background-color: white;
            border-radius: 20px;
            padding: 12px 16px;
            margin: 8px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .character-bubble::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 20px;
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: white transparent transparent;
        }
        .btn-primary {
            background-color: #4f46e5;
            color: white;
            transition: all 0.2s;
        }
        .btn-primary:hover {
            background-color: #4338ca;
            transform: scale(1.05);
        }
        .btn-secondary {
            background-color: #f59e0b;
            color: white;
            transition: all 0.2s;
        }
        .btn-secondary:hover {
            background-color: #d97706;
            transform: scale(1.05);
        }
        .option-btn {
            transition: all 0.2s;
        }
        .option-btn:hover {
            transform: scale(1.03);
        }
        .correct-answer {
            background-color: #10b981 !important;
            color: white !important;
        }
        .wrong-answer {
            background-color: #ef4444 !important;
            color: white !important;
        }
        .audio-btn {
            transition: all 0.2s;
        }
        .audio-btn:hover {
            transform: scale(1.1);
        }
        .page-indicator {
            transition: all 0.2s;
        }
        .page-indicator.active {
            background-color: #4f46e5;
            color: white;
            transform: scale(1.1);
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .loading-pulse {
            animation: pulse 1.5s infinite;
        }
    </style>
</head>
<body class="min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 标题区 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-indigo-600 mb-2">森林小动物互动绘本</h1>
            <p class="text-xl text-gray-600">大象壮壮和朋友们的故事</p>
        </div>

        <!-- 模式选择 -->
        <div class="flex justify-center gap-4 mb-8">
            <button id="autoPlayBtn" class="btn-primary px-6 py-3 rounded-full text-lg font-semibold">
                <i class="fas fa-play mr-2"></i>自动播放
            </button>
            <button id="manualPlayBtn" class="btn-secondary px-6 py-3 rounded-full text-lg font-semibold">
                <i class="fas fa-hand-pointer mr-2"></i>自主阅读
            </button>
        </div>

        <!-- 绘本内容区 -->
        <div id="bookContent" class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
            <!-- 页面指示器 -->
            <div class="flex justify-center space-x-2 py-4 bg-indigo-50">
                <div class="page-indicator w-8 h-8 rounded-full flex items-center justify-center border-2 border-indigo-300 font-semibold" data-page="1">1</div>
                <div class="page-indicator w-8 h-8 rounded-full flex items-center justify-center border-2 border-indigo-300 font-semibold" data-page="2">2</div>
                <div class="page-indicator w-8 h-8 rounded-full flex items-center justify-center border-2 border-indigo-300 font-semibold" data-page="3">3</div>
                <div class="page-indicator w-8 h-8 rounded-full flex items-center justify-center border-2 border-indigo-300 font-semibold" data-page="4">4</div>
                <div class="page-indicator w-8 h-8 rounded-full flex items-center justify-center border-2 border-indigo-300 font-semibold" data-page="5">5</div>
            </div>

            <!-- 绘本页面内容 -->
            <div class="p-6">
                <!-- 第1页 -->
                <div id="page1" class="book-page">
                    <div class="flex justify-center mb-6">
                        <img src="https://s.coze.cn/t/5CfuIuPSnUI/" alt="第1页图片" class="rounded-xl shadow-md max-h-64">
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <span class="font-bold text-indigo-600 mr-2">旁白:</span>
                            <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/c2ba5279e4514e60b727836ea3f2d75f.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700 mb-2">阳光明媚的一天，大象壮壮在森林里散步。突然，他不小心踩到了一根细绳。</p>
                        <p class="text-gray-500 italic">On a sunny day, elephant Zhuangzhuang was walking in the forest. Suddenly, he accidentally stepped on a thin rope.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-blue-600 mr-2">壮壮:</span>
                            <button class="audio-btn ml-2 text-blue-500 hover:text-blue-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/5fe56f8ecb874b3985d122ba6fc325c2.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">咦？这是什么？我的脚好像被什么东西缠住了。</p>
                        <p class="text-gray-500 italic">Hmm? What's this? My foot seems to be tangled in something.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-green-600 mr-2">小鸟:</span>
                            <button class="audio-btn ml-2 text-green-500 hover:text-green-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/82b564509d914f4b916357f60a88fbd7.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">壮壮，你怎么了？看起来很着急。</p>
                        <p class="text-gray-500 italic">Zhuangzhuang, what's wrong? You look worried.</p>
                    </div>
                </div>

                <!-- 第2页 -->
                <div id="page2" class="book-page hidden">
                    <div class="flex justify-center mb-6">
                        <img src="https://s.coze.cn/t/VXlNAdkMxnc/" alt="第2页图片" class="rounded-xl shadow-md max-h-64">
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <span class="font-bold text-indigo-600 mr-2">旁白:</span>
                            <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/d7bba160614944f9a960491167ca2623.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700 mb-2">壮壮低头一看，发现自己的脚被一根细绳紧紧缠住了，怎么也挣脱不开。</p>
                        <p class="text-gray-500 italic">Zhuangzhuang looked down and found his foot tightly wrapped by a thin rope, which he couldn't break free from.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-blue-600 mr-2">壮壮:</span>
                            <button class="audio-btn ml-2 text-blue-500 hover:text-blue-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/d970fdb9445c4b82a6b61def029ef574.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">哎呀，这根绳子好紧啊！我动不了了。</p>
                        <p class="text-gray-500 italic">Oh no, this rope is so tight! I can't move.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-yellow-600 mr-2">猴子:</span>
                            <button class="audio-btn ml-2 text-yellow-500 hover:text-yellow-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/67309f1d889e4aa3bfcead4b59977eb3.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">别担心，壮壮！我来帮你解开。</p>
                        <p class="text-gray-500 italic">Don't worry, Zhuangzhuang! I'll help you untie it.</p>
                    </div>
                </div>

                <!-- 第3页 -->
                <div id="page3" class="book-page hidden">
                    <div class="flex justify-center mb-6">
                        <img src="https://s.coze.cn/t/Pks7Gfua1RQ/" alt="第3页图片" class="rounded-xl shadow-md max-h-64">
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <span class="font-bold text-indigo-600 mr-2">旁白:</span>
                            <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/5f8fea0c2d84467880c871e8cf4a64b7.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700 mb-2">猴子爬到壮壮的脚上，试着解开绳子，但绳子打得太紧了。</p>
                        <p class="text-gray-500 italic">The monkey climbed onto Zhuangzhuang's foot and tried to untie the rope, but it was tied too tightly.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-yellow-600 mr-2">猴子:</span>
                            <button class="audio-btn ml-2 text-yellow-500 hover:text-yellow-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/92a9a6461bef4ac2ac2ee390a6370e15.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">哎呀，这个结打得太紧了，我一个人解不开。</p>
                        <p class="text-gray-500 italic">Oh no, this knot is too tight, I can't untie it alone.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-pink-600 mr-2">兔子:</span>
                            <button class="audio-btn ml-2 text-pink-500 hover:text-pink-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/50be027a14a84662b70fc53191537ba1.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">壮壮，别着急，我们叫更多朋友来帮忙！</p>
                        <p class="text-gray-500 italic">Zhuangzhuang, don't worry, we'll call more friends to help!</p>
                    </div>
                </div>

                <!-- 第4页 -->
                <div id="page4" class="book-page hidden">
                    <div class="flex justify-center mb-6">
                        <img src="https://s.coze.cn/t/o0DK5XdcgY0/" alt="第4页图片" class="rounded-xl shadow-md max-h-64">
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <span class="font-bold text-indigo-600 mr-2">旁白:</span>
                            <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/06218e1c094e4b77a61bdd9b28483f31.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700 mb-2">兔子和小鸟去找来了森林里的其他小动物，大家一起想办法帮助壮壮。</p>
                        <p class="text-gray-500 italic">The rabbit and the bird went to find other small animals in the forest, and everyone tried to help Zhuangzhuang together.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-orange-600 mr-2">松鼠:</span>
                            <button class="audio-btn ml-2 text-orange-500 hover:text-orange-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/be2b37d50a7c4cdc894073d01d295542.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">我有锋利的牙齿，可以咬断绳子！</p>
                        <p class="text-gray-500 italic">I have sharp teeth, I can bite the rope!</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-blue-600 mr-2">壮壮:</span>
                            <button class="audio-btn ml-2 text-blue-500 hover:text-blue-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/9742a53fc8f643d4b0e74079aa53172c.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">谢谢大家来帮助我，你们真是我的好朋友。</p>
                        <p class="text-gray-500 italic">Thank you all for helping me, you are really my good friends.</p>
                    </div>
                </div>

                <!-- 第5页 -->
                <div id="page5" class="book-page hidden">
                    <div class="flex justify-center mb-6">
                        <img src="https://s.coze.cn/t/radNMVIA5J4/" alt="第5页图片" class="rounded-xl shadow-md max-h-64">
                    </div>
                    
                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <span class="font-bold text-indigo-600 mr-2">旁白:</span>
                            <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/62d6a37160d4403ab50702486ae33ca5.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700 mb-2">松鼠用锋利的牙齿咬断了绳子，壮壮终于自由了！大家高兴地跳了起来。</p>
                        <p class="text-gray-500 italic">The squirrel bit the rope with its sharp teeth, and Zhuangzhuang was finally free! Everyone jumped for joy.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-blue-600 mr-2">壮壮:</span>
                            <button class="audio-btn ml-2 text-blue-500 hover:text-blue-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/1071b488baa24d0e8ae5ad54c25eda78.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">太感谢你们了！没有你们的帮助，我不知道要被困多久。</p>
                        <p class="text-gray-500 italic">Thank you so much! Without your help, I don't know how long I would have been trapped.</p>
                    </div>
                    
                    <div class="character-bubble">
                        <div class="flex items-center">
                            <span class="font-bold text-purple-600 mr-2">所有动物:</span>
                            <button class="audio-btn ml-2 text-purple-500 hover:text-purple-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/e36c21f9fac74580b968f2004c65f8e8.mp3">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        <p class="text-gray-700">朋友之间就应该互相帮助呀！</p>
                        <p class="text-gray-500 italic">Friends should help each other!</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 问答区 -->
        <div id="quizSection" class="bg-white rounded-2xl shadow-xl p-6 mb-8 hidden">
            <h2 class="text-2xl font-bold text-center text-indigo-600 mb-6">故事问答</h2>
            
            <div id="quiz1" class="mb-8">
                <div class="flex items-center mb-4">
                    <span class="font-bold text-lg text-gray-700 mr-2">1. 亲爱的小朋友，大象壮壮被什么东西困住了？</span>
                    <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/4e0b7b8a3d6b4d1ebdc1ae41850357d6.mp3">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button class="option-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 px-4 rounded-lg" data-answer="A">
                        <span class="font-semibold">A.</span> 大树/ Big tree
                    </button>
                    <button class="option-btn bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg" data-answer="B">
                        <span class="font-semibold">B.</span> 细绳/ Thin rope
                    </button>
                    <button class="option-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 px-4 rounded-lg" data-answer="C">
                        <span class="font-semibold">C.</span> 石头/ Big stone
                    </button>
                </div>
                <div class="mt-4 hidden" id="answer1">
                    <div class="bg-indigo-50 p-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="font-semibold">正确答案: </span>
                        <span class="ml-2">细绳 [音频]</span>
                        <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/d128b4a48336407e81a6cc40dff85b4c.mp3">
                            <i class="fas fa-volume-up"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="quiz2" class="mb-8">
                <div class="flex items-center mb-4">
                    <span class="font-bold text-lg text-gray-700 mr-2">2. 亲爱的小朋友，谁第一个发现壮壮遇到困难？</span>
                    <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/d3fa98d076b841dcbea445ff804fb809.mp3">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button class="option-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 px-4 rounded-lg" data-answer="A">
                        <span class="font-semibold">A.</span> 小鸟/ Little Bird
                    </button>
                    <button class="option-btn bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg" data-answer="B">
                        <span class="font-semibold">B.</span> 猴子/ Monkey
                    </button>
                    <button class="option-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 px-4 rounded-lg" data-answer="C">
                        <span class="font-semibold">C.</span> 兔子/ Rabbit
                    </button>
                </div>
                <div class="mt-4 hidden" id="answer2">
                    <div class="bg-indigo-50 p-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="font-semibold">正确答案: </span>
                        <span class="ml-2">小鸟 [音频]</span>
                        <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/d924ed7c9eb3432a9fa2a3ca04ec236c.mp3">
                            <i class="fas fa-volume-up"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="quiz3" class="mb-8">
                <div class="flex items-center mb-4">
                    <span class="font-bold text-lg text-gray-700 mr-2">3. 亲爱的小朋友，猴子尝试用什么方法帮助壮壮？</span>
                    <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/f83b1da47f7e49c0b9fee5102e0159b8.mp3">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button class="option-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 px-4 rounded-lg" data-answer="A">
                        <span class="font-semibold">A.</span> 咬断绳子/ Bite the rope
                    </button>
                    <button class="option-btn bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg" data-answer="B">
                        <span class="font-semibold">B.</span> 解开绳子/ Untie the rope
                    </button>
                    <button class="option-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 px-4 rounded-lg" data-answer="C">
                        <span class="font-semibold">C.</span> 拉壮壮/ Pull Zhuangzhuang
                    </button>
                </div>
                <div class="mt-4 hidden" id="answer3">
                    <div class="bg-indigo-50 p-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="font-semibold">正确答案: </span>
                        <span class="ml-2">解开绳子 [音频]</span>
                        <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/8f3840e464a94b60918313ebbc4d16fa.mp3">
                            <i class="fas fa-volume-up"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="quiz4" class="mb-8">
                <div class="flex items-center mb-4">
                    <span class="font-bold text-lg text-gray-700 mr-2">4. 亲爱的小朋友，最后是谁咬断了绳子救了壮壮？</span>
                    <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/e445000579cf449fbf2ccbbb4e9d17cc.mp3">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button class="option-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 px-4 rounded-lg" data-answer="A">
                        <span class="font-semibold">A.</span> 松鼠/ Squirrel
                    </button>
                    <button class="option-btn bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg" data-answer="B">
                        <span class="font-semibold">B.</span> 兔子/ Rabbit
                    </button>
                    <button class="option-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 px-4 rounded-lg" data-answer="C">
                        <span class="font-semibold">C.</span> 猴子/ Monkey
                    </button>
                </div>
                <div class="mt-4 hidden" id="answer4">
                    <div class="bg-indigo-50 p-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="font-semibold">正确答案: </span>
                        <span class="ml-2">松鼠 [音频]</span>
                        <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/7bdcd14e9317415f97c54191526ad2d8.mp3">
                            <i class="fas fa-volume-up"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="quiz5">
                <div class="flex items-center mb-4">
                    <span class="font-bold text-lg text-gray-700 mr-2">5. 亲爱的小朋友，这个故事告诉我们什么道理？</span>
                    <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/a64dcb345d7d4eb99501cd3a60b22dd8.mp3">
                        <i class="fas fa-volume-up"></i>
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button class="option-btn bg-blue-100 hover:bg-blue-200 text-blue-800 py-3 px-4 rounded-lg" data-answer="A">
                        <span class="font-semibold">A.</span> 不要在森林里玩/ Don't play in the forest
                    </button>
                    <button class="option-btn bg-green-100 hover:bg-green-200 text-green-800 py-3 px-4 rounded-lg" data-answer="B">
                        <span class="font-semibold">B.</span> 朋友之间要互相帮助/ Friends should help each other
                    </button>
                    <button class="option-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 py-3 px-4 rounded-lg" data-answer="C">
                        <span class="font-semibold">C.</span> 大象很容易被困住/ Elephants get trapped easily
                    </button>
                </div>
                <div class="mt-4 hidden" id="answer5">
                    <div class="bg-indigo-50 p-3 rounded-lg flex items-center">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                        <span class="font-semibold">正确答案: </span>
                        <span class="ml-2">朋友之间要互相帮助 [音频]</span>
                        <button class="audio-btn ml-2 text-indigo-500 hover:text-indigo-700" data-audio="https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/artist/image/4b1c4e22ad614f5ba163b5e2002d3be7.mp3">
                            <i class="fas fa-volume-up"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制区 -->
        <div class="flex justify-between items-center bg-white rounded-2xl shadow-xl p-4">
            <button id="prevBtn" class="btn-primary px-6 py-2 rounded-full">
                <i class="fas fa-arrow-left mr-2"></i>上一页
            </button>
            
            <div class="flex space-x-2">
                <button id="quizBtn" class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-full">
                    <i class="fas fa-question-circle mr-2"></i>问答环节
                </button>
                <button id="replayBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-full">
                    <i class="fas fa-redo mr-2"></i>重新播放
                </button>
            </div>
            
            <button id="nextBtn" class="btn-primary px-6 py-2 rounded-full">
                下一页<i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-indigo-50 py-6 mt-12">
        <div class="container mx-auto px-4 text-center text-gray-600">
            <p>created by <a href="https://space.coze.cn" class="text-indigo-600 hover:text-indigo-800 font-medium">coze space</a></p>
            <p class="mt-2">页面内容均由 AI 生成，仅供参考</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 当前页面
            let currentPage = 1;
            const totalPages = 5;
            let autoPlayMode = false;
            let audioElements = {};
            
            // 初始化音频元素
            function initAudioElements() {
                document.querySelectorAll('.audio-btn').forEach(btn => {
                    const audioUrl = btn.getAttribute('data-audio');
                    if (audioUrl && !audioElements[audioUrl]) {
                        audioElements[audioUrl] = new Audio(audioUrl);
                    }
                });
            }
            
            // 播放音频
            function playAudio(audioUrl) {
                if (audioElements[audioUrl]) {
                    // 先停止所有正在播放的音频
                    Object.values(audioElements).forEach(audio => {
                        audio.pause();
                        audio.currentTime = 0;
                    });
                    
                    // 播放当前音频
                    audioElements[audioUrl].play();
                    return audioElements[audioUrl];
                }
                return null;
            }
            
            // 显示页面
            function showPage(pageNum) {
                // 隐藏所有页面
                document.querySelectorAll('.book-page').forEach(page => {
                    page.classList.add('hidden');
                });
                
                // 显示当前页面
                const pageElement = document.getElementById(`page${pageNum}`);
                if (pageElement) {
                    pageElement.classList.remove('hidden');
                }
                
                // 更新页面指示器
                document.querySelectorAll('.page-indicator').forEach(indicator => {
                    indicator.classList.remove('active');
                    if (parseInt(indicator.getAttribute('data-page')) === pageNum) {
                        indicator.classList.add('active');
                    }
                });
                
                // 更新按钮状态
                document.getElementById('prevBtn').disabled = pageNum === 1;
                document.getElementById('nextBtn').disabled = pageNum === totalPages;
                
                // 如果是自动播放模式，播放当前页面的所有音频
                if (autoPlayMode) {
                    autoPlayPage(pageNum);
                }
            }
            
            // 自动播放页面内容
            function autoPlayPage(pageNum) {
                // 获取当前页面的所有音频按钮
                const audioBtns = document.querySelectorAll(`#page${pageNum} .audio-btn`);
                
                // 递归播放音频
                function playNextAudio(index) {
                    if (index >= audioBtns.length) {
                        // 所有音频播放完毕，自动翻页
                        if (pageNum < totalPages) {
                            setTimeout(() => {
                                currentPage++;
                                showPage(currentPage);
                            }, 1000);
                        }
                        return;
                    }
                    
                    const audioUrl = audioBtns[index].getAttribute('data-audio');
                    const audio = playAudio(audioUrl);
                    
                    if (audio) {
                        audio.onended = function() {
                            setTimeout(() => {
                                playNextAudio(index + 1);
                            }, 500);
                        };
                    } else {
                        playNextAudio(index + 1);
                    }
                }
                
                // 开始播放第一个音频
                playNextAudio(0);
            }
            
            // 初始化
            initAudioElements();
            showPage(1);
            
            // 事件监听
            document.getElementById('prevBtn').addEventListener('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    showPage(currentPage);
                }
            });
            
            document.getElementById('nextBtn').addEventListener('click', function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    showPage(currentPage);
                } else {
                    // 如果是最后一页，点击下一页进入问答环节
                    document.getElementById('bookContent').classList.add('hidden');
                    document.getElementById('quizSection').classList.remove('hidden');
                    this.disabled = true;
                }
            });
            
            document.getElementById('autoPlayBtn').addEventListener('click', function() {
                autoPlayMode = true;
                currentPage = 1;
                showPage(currentPage);
                this.classList.add('bg-indigo-700');
                document.getElementById('manualPlayBtn').classList.remove('bg-indigo-700');
            });
            
            document.getElementById('manualPlayBtn').addEventListener('click', function() {
                autoPlayMode = false;
                this.classList.add('bg-indigo-700');
                document.getElementById('autoPlayBtn').classList.remove('bg-indigo-700');
            });
            
            document.getElementById('replayBtn').addEventListener('click', function() {
                showPage(currentPage);
            });
            
            document.getElementById('quizBtn').addEventListener('click', function() {
                document.getElementById('bookContent').classList.add('hidden');
                document.getElementById('quizSection').classList.remove('hidden');
            });
            
            // 音频按钮点击事件
            document.querySelectorAll('.audio-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const audioUrl = this.getAttribute('data-audio');
                    playAudio(audioUrl);
                });
            });
            
            // 问答选项点击事件
            document.querySelectorAll('.option-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const quizId = this.closest('[id^="quiz"]').id;
                    const answerId = `answer${quizId.replace('quiz', '')}`;
                    const correctAnswer = 'B'; // 所有问题的正确答案都是B
                    
                    // 移除之前的选择样式
                    document.querySelectorAll(`#${quizId} .option-btn`).forEach(opt => {
                        opt.classList.remove('correct-answer', 'wrong-answer');
                    });
                    
                    // 标记选择
                    if (this.getAttribute('data-answer') === correctAnswer) {
                        this.classList.add('correct-answer');
                    } else {
                        this.classList.add('wrong-answer');
                    }
                    
                    // 显示正确答案
                    document.getElementById(answerId).classList.remove('hidden');
                });
            });
            
            // 页面指示器点击事件
            document.querySelectorAll('.page-indicator').forEach(indicator => {
                indicator.addEventListener('click', function() {
                    const pageNum = parseInt(this.getAttribute('data-page'));
                    currentPage = pageNum;
                    showPage(currentPage);
                });
            });
        });
    </script>
</body>
</html>